<template>
  <div class="exactMain">
    <h3 class="niceResults">最佳匹配</h3>
    <ul>
      <li>
        <van-cell center is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-image
              width="50px"
              height="50px"
              fit="cover"
              :src="songInfo.img1v1Url"
            />
            <van-row type="flex"  gutter="10" justify="center">
              <van-col span="24">歌手：{{songInfo.name}}</van-col>
            </van-row>
          </template>
        </van-cell>
      </li>
    </ul>
    <van-divider />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ExactMatch',
  computed: {
    ...mapState(['authorId', 'songInfo'])
  },
  watch: {
    authorId () {
      this.$store.dispatch('exactSongs')
    }
  }
}
</script>

<style lang="less" scoped>
.exactMain{
  margin-left: 10px;
}
.niceResults{
  font-size: 12px;
  line-height: 16px;
  color: #666;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
.van-cell--center{
 padding: 10px 0;
}
.van-cell__right-icon{
  margin-right: 10px;
}
/deep/ .van-image{
  margin-right: 15px;
}
/deep/ .custom-title{
  font-size: .453333rem;
  color: #333;
}
.van-row--justify-center{
  line-height: 2.5;
  display: inline-block;
}
</style>
